<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">
  <h:head>
    <title>Cadastrar Cliente</title>
  </h:head>
  <h:messages />
  <h:form id="form">
    <h:inputHidden value="#{clienteBean.cliente.id}"/>
    <p:panelGrid columns="2" style="width: 200px;border: 0px">
      <f:facet name="header">
        Cadastro de Clientes
      </f:facet>
      <h:outputLabel value="Nome" for="nomein"/>
      <h:inputText id="nomein" value="#{clienteBean.cliente.nome}"/>
      <br />
      <p:commandButton id="salvar"  action="#{clienteBean.salvar}" value="Salvar" update=":listagem:tbcli"/>
    </p:panelGrid>
    <br /><br />
  </h:form>
  <h:form id="listagem">
    <p:panelGrid style="width: 500px" columns="1" id="dados">
      <f:facet name="headertable">
        Clientes cadastrados
      </f:facet>
      <p:dataTable var="clientes" value="#{clienteBean.clientes}" draggableColumns="true" 
                   resizableColumns="true" id="tbcli" selection="#{clienteBean.clienteSelected}" 
                   selectionMode="single" rowKey="#{clientes.id}" sortMode="multiple" rows="3"
                   paginator="true"
                   >
        <f:ajax event="rowSelect" render=":listagem"/>
        <p:column headerText="Id" sortBy="#{id}" rendered="true" width="50" filterBy="#{clientes.id}" filterMatchMode="startsWith"
                  style="font-size: smaller" >
          <h:outputText value="#{clientes.id}" style="font-size: small"/>
        </p:column>
        <p:column headerText="NOME" sortBy="#{nome}" width="100" filterBy="#{clientes.nome}" filterMatchMode="contains"
                  style="font-size: smaller">
          <h:outputText value="#{clientes.nome}" style="font-size: small"/>
        </p:column>
      </p:dataTable>
      <p:panelGrid columns="3" id="botoes">
        <p:commandButton id="alterar" value="Alterar" style="font-family: monospace"/>
        <p:commandButton id="excluir" action="#{clienteBean.excluir()}" value="Excluir" update=":listagem:tbcli" 
                         style="font-family: monospace"/>
        <p:outputLabel id="selecionado" value="#{clienteBean.clienteSelected.nome}" />
      </p:panelGrid>
    </p:panelGrid>
  </h:form>
</html>

